<!doctype html>
<html lang="zh-CN"><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
    <title>薛尧的博客</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="" />

    
    
    
    <link rel="stylesheet" href="../../../css/theme.min.css">

    
    
    
    
    <link rel="stylesheet" href="../../../css/custom.min.css">
    

    
</head>
<body>
        <div id="content" class="mx-auto"><header class="container mt-sm-5 mt-4 mb-4 mt-xs-1">
    <div class="row">
        
        <div class="col-sm-4 col-12 text-sm-right text-center pt-sm-4">
            <a href="../../../" class="text-decoration-none">
                <img id="home-image" class="rounded-circle"
                    
                        src="https://ueyao.github.io/image-hosting/blog/avatar.png"
                    
                />
            </a>
        </div>
        <div class="col-sm-8 col-12 text-sm-left text-center">
        
            <h2 class="m-0 mb-2 mt-4">
                <a href="../../../" class="text-decoration-none">
                    
                        薛尧
                    
                </a>
            </h2>
            <p class="text-muted mb-1">
                
                    Java Developer | Short Video Creator
                
            </p>
            <ul id="nav-links" class="list-inline mb-2">
                
                
                    <li class="list-inline-item">
                        <a class="badge badge-white " href="../../../about/" title="关于">关于</a>
                    </li>
                
                    <li class="list-inline-item">
                        <a class="badge badge-white " href="../../../post/" title="文章">文章</a>
                    </li>
                
                    <li class="list-inline-item">
                        <a class="badge badge-white " href="../../../categories/" title="分类">分类</a>
                    </li>
                
            </ul>
            <ul id="nav-social" class="list-inline">
                
                    <li class="list-inline-item mr-3">
                        <a href="http://github.com/flowstone" target="_blank">
                            <i class="fab fa-github fa-1x text-muted"></i>
                        </a>
                    </li>
                
                    <li class="list-inline-item mr-3">
                        <a href="mailto:xueyao.me#gmail.com" target="_blank">
                            <i class="fas fa-at fa-1x text-muted"></i>
                        </a>
                    </li>
                
            </ul>
        </div>
    </div>
    <hr />
</header>
<div class="container">
    <div class="pl-sm-2">
        <div class="mb-3">
            <h3 class="mb-0">Ant Design中使用Upload上传组件如何自定义文件列表展示位置</h3>
            
            <small class="text-muted">发布于 2021-02-17</small>
        </div>

        <article>
            <h2 id="软件环境">软件环境</h2>
<ul>
<li>macOS Big Sur 11.1</li>
<li>React 16.12.0</li>
<li>Ant Design 4.10.0</li>
</ul>
<h2 id="实际效果">实际效果</h2>
<p>现有一个需求，是上传文件，点击浏览文件按钮，选中文件后，在按钮的上方显示，上传的文件列表，如下图所示
<img src="https://ueyao.github.io/image-hosting/blog/2021/1/20210110125630518_804905005.png" alt=""></p>
<h2 id="当前效果">当前效果</h2>
<p>目前使用阿里的Ant UI组件库，使用其中的上传组件，官方提供的示例，如下图如示
<img src="https://ueyao.github.io/image-hosting/blog/2021/1/20210113133631917_394793026.png" alt=""></p>
<p>本地使用后，如下图所示
<img src="https://ueyao.github.io/image-hosting/blog/2021/1/20210110125953680_1038926582.png" alt=""></p>
<p>如何才能实现，我们需要的效果呢，Google了好多文章，找到了一种方式，就是重写itemRender方法，自定义文件列表的展示，使用这个方法，需要重写多个action。</p>
<p>后来查看公司前端人员写的代码，看到另一种解决方法。</p>
<p>主要使用两个Upload组件，第一个Upload组件主要是展示文件列表，第二个Upload组件是选择文件上传的这个操作，不过，选择文件后，把文件列表在下方展示隐藏起来。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#a6e22e">showUploadList</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>, <span style="color:#75715e">//不显示上传的列表
</span></span></span></code></pre></div><p>把得到的文件列表，赋值给第一个Upload组件中，大概如下：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#a6e22e">beforeUpload</span>(<span style="color:#a6e22e">file</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">any</span>, <span style="color:#a6e22e">fileList</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">any</span>) {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">setFileList</span>(<span style="color:#a6e22e">fileList</span>); <span style="color:#75715e">//设置文件列表
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>; <span style="color:#75715e">//不要调用上传文件接口
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        },
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!--第一个Upload组件--&gt;</span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">Upload</span> <span style="color:#a6e22e">fileList</span><span style="color:#f92672">=</span><span style="color:#e6db74">{fileList}</span>&gt;&lt;/<span style="color:#f92672">Upload</span>&gt;
</span></span></code></pre></div><p>部分代码如下：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> &lt;<span style="color:#f92672">Style</span><span style="color:#a6e22e">Content</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">Style</span><span style="color:#a6e22e">MainContent</span>&gt;
</span></span><span style="display:flex;"><span>        &lt;<span style="color:#f92672">Button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span><span style="color:#e6db74">{btnOnClick}</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;primary&#34;</span>&gt;打开上传&lt;/<span style="color:#f92672">Button</span>&gt;
</span></span><span style="display:flex;"><span>        &lt;<span style="color:#f92672">Modal</span> <span style="color:#a6e22e">visible</span><span style="color:#f92672">=</span><span style="color:#e6db74">{isVisible}</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;上传附件&#34;</span> <span style="color:#a6e22e">footer</span><span style="color:#f92672">=</span><span style="color:#e6db74">{[]}</span> <span style="color:#a6e22e">closable</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">{{</span> <span style="color:#a6e22e">border:</span> <span style="color:#960050;background-color:#1e0010">&#39;</span><span style="color:#a6e22e">1px</span> <span style="color:#a6e22e">solid</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">ccc</span><span style="color:#960050;background-color:#1e0010">&#39;,</span> <span style="color:#a6e22e">height:</span> <span style="color:#a6e22e">150</span><span style="color:#960050;background-color:#1e0010">,</span> <span style="color:#a6e22e">marginBottom:</span> <span style="color:#a6e22e">10</span> <span style="color:#960050;background-color:#1e0010">}}</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">Upload</span> <span style="color:#a6e22e">fileList</span><span style="color:#f92672">=</span><span style="color:#e6db74">{fileList}</span> <span style="color:#a6e22e">onChange</span><span style="color:#f92672">=</span><span style="color:#e6db74">{onChange}</span>&gt;&lt;/<span style="color:#f92672">Upload</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">{{</span> <span style="color:#a6e22e">textAlign:</span> <span style="color:#960050;background-color:#1e0010">&#39;</span><span style="color:#a6e22e">right</span><span style="color:#960050;background-color:#1e0010">&#39;</span> <span style="color:#960050;background-color:#1e0010">}}</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">Upload</span> <span style="color:#960050;background-color:#1e0010">{...</span><span style="color:#a6e22e">updateProps</span><span style="color:#960050;background-color:#1e0010">}</span> &gt;&lt;<span style="color:#f92672">Button</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;primary&#34;</span>&gt;浏览文件&lt;/<span style="color:#f92672">Button</span>&gt;&lt;/<span style="color:#f92672">Upload</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">Button</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">{{marginLeft:2}}</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span><span style="color:#e6db74">{()</span> <span style="color:#960050;background-color:#1e0010">=</span>&gt; { setIsVisible(false) }}&gt;关闭&lt;/<span style="color:#f92672">Button</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>        &lt;/<span style="color:#f92672">Modal</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;/<span style="color:#f92672">StyleMainContent</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">StyleContent</span>&gt;
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">isVisible</span>, <span style="color:#a6e22e">setIsVisible</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">fileList</span>, <span style="color:#a6e22e">setFileList</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>([]);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">btnOnClick</span> <span style="color:#f92672">=</span> () =&gt; {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">setIsVisible</span>(<span style="color:#66d9ef">true</span>);
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">updateProps</span> <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;file&#39;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">beforeUpload</span>(<span style="color:#a6e22e">file</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">any</span>, <span style="color:#a6e22e">fileList</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">any</span>) {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">setFileList</span>(<span style="color:#a6e22e">fileList</span>);
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">showUploadList</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">styly</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;inline-block&#39;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">onChange</span> <span style="color:#f92672">=</span> ({ <span style="color:#a6e22e">file</span>, <span style="color:#a6e22e">fileList</span> }<span style="color:#f92672">:</span> { <span style="color:#a6e22e">file</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">any</span>; <span style="color:#a6e22e">fileList</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">any</span> }) =&gt; {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">file</span>, <span style="color:#a6e22e">fileList</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">setFileList</span>(<span style="color:#a6e22e">fileList</span>);
</span></span><span style="display:flex;"><span>    };
</span></span></code></pre></div>
        </article>
    </div>

    <div id="disqus_thread"></div>
<script>
    window.disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "xie-yao-de-bo-ke" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

            </div>
        </div><footer class="text-center pb-1">
    <small class="text-muted">
        
        &copy; Copyright 2024
        
        |
        <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备14012079号</a>
        <br />
        由 <a href="https://gohugo.io/" target="_blank">Hugo</a> 强力驱动
        | 主题 <a href="https://github.com/austingebauer/devise" target="_blank">Devise</a>
        <br />

    </small>
</footer></body>
</html>
